<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>{$system_name}</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileColor" content="#0e90d2">
    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
    <!--
  <link rel="canonical" href="http://www.example.com/">
  -->
    <link rel="stylesheet" href="__PUBLIC__/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/css/app.css">
    <!--<link rel="stylesheet" href="__PUBLIC__/assets/css/index.css">-->
    <!--必要样式-->
    <style>
        .intergral{
            margin: 0 10px;
        }
        .intergral-item{
            border-bottom: 1px solid #d4d4d4;
            padding: 10px 0;
            /*line-height: 66px;*/
        }
        .name{
            display: block;
            font-size: 14px;
            color: #000;
            line-height: 20px;
            margin-top: 5px;
        }
        .time{

            display: block;
            font-size: 9px;
            color: #7F7C7C;
            line-height: 20px;
        }
        .jifen{
            display: block;
            font-size: 15px;
            color: #000;
            margin-top: 10px;
        }
        .addcolor{
            color: #F6DB7F;
        }

        [data-am-widget=tabs] {
            margin: 0px;
        }
        .am-tabs-bd{
            border: none;
        }
        .am-tabs-d2 .am-tabs-nav>.am-active a{
            color: #333;
        }
        .am-tabs-d2 .am-tabs-nav>.am-active{
            border-color:#333 ;
        }
        .am-tabs-d2 .am-tabs-nav>.am-active:after{
            border-bottom-color: #333;
        }
    </style>
</head>

<body>
<header data-am-widget="header" class="am-header am-header-default">
    <div class="am-header-left am-header-nav">
        <a href="__APP__/Home/Me" class="">
            <img src="__PUBLIC__/assets/i/left.png" alt="" style="margin: 5px">
        </a>
    </div>
    <h1 class="am-header-title">
        <a href="#title-link" class="">
            交易记录
        </a>
    </h1>
</header>


<div data-am-widget="tabs"
     class="am-tabs am-tabs-d2"
>
    <ul class="am-tabs-nav am-cf" id="doc-my-tabs">
        <li class="am-active"><a href="[data-tab-panel-0]" data-money_type="1">钻石</a></li>
        <li class=""><a href="[data-tab-panel-1]" data-money_type="0">金币</a></li>
    </ul>
    <div class="am-tabs-bd">
        <!--钻石记录-->
        <div data-tab-panel-0 class="am-tab-panel am-active">
            <div class="intergral" id="integral_list">

            </div>
        </div>
        <!--金币记录-->
        <div data-tab-panel-1 class="am-tab-panel ">
            <div class="intergral" id="gold_list">
            </div>
        </div>

    </div>
</div>




<!--[if (gte IE 9)|!(IE)]><!-->
<script src="__PUBLIC__/assets/js/jquery.min.js"></script>
<script src="__PUBLIC__/assets/js/angular.min.js"></script>
<script src="__PUBLIC__/assets/js/amazeui.min.js"></script>
<script type="text/javascript">
    var gold_page=1; //当前页的页码
    var gold_allpage =1; //总页码，会从后台获取
    var integral_page=1; //当前页的页码
    var integral_allpage =1; //总页码，会从后台获取
    var money_type = 1;
    $(function () {
        getMoneyLogListByPage(1,1);
    });
    $('#doc-my-tabs').find('a').on('opened.tabs.amui', function(e) {
        money_type = $(this).data('money_type');
        if(money_type == 0) {
            getMoneyLogList(0);
        }else{
            if (integral_page <= integral_allpage) {
                getMoneyLogList(1);
            }
        }
    });
    function scrollFn(){
        gold_allpage = $('#gold_totalpage').val();
        integral_allpage = $('#integral_totalpage').val();
        //真实内容的高度
        var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight);
        //视窗的高度
        var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
        //隐藏的高度
        var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        if(pageHeight - viewportHeight - scrollHeight < 20){  //如果满足触发条件，执行
            if(money_type == 0) {
                if (gold_page <= gold_allpage) {
                    getMoneyLogList(0);
                }
            }else{
                if (integral_page <= integral_allpage) {
                    getMoneyLogList(1);
                }
            }
        }
    }
    $(window).bind("scroll",scrollFn);  //绑定滚动事件
    function getMoneyLogListByPage(pagenum,money_type) {
        //提交form
        $('#match_log_pagenum_hidden').val(pagenum);
        getMoneyLogList(money_type);
    }
    function getMoneyLogList(money_type) {
        var page = 0;
        if(money_type == 0){
            page = gold_page;
        }else{
            page = integral_page;
        }
        $.ajax({
            type: "POST",
            url: "__URL__/ajaxMoneyLogList",
            async: false,
            data: {
                pagenum: page,
                money_type:money_type
            },
//            dataType: "json",
            success: function (data) {
//                console.info(data);
                if(money_type == 0){
                    gold_page++;  //页数加1
                    $('#gold_list').append(data);
                }else{
                    integral_page++;
                    $('#integral_list').append(data);
                }

                AMUI.gallery.init();
//                $("img .lazy").lazyload();
            },
            error: function (data) {
                console.info(data);
            }
        });
    }
</script>
</body>
</html>

